<template>
  <div class="detail-page">
    <!-- 搜索栏 -->
    <van-nav-bar left-arrow @click-left="$router.go(-1)" class="searchfor">
      <template #right>
        <van-search
          show-action
          label="上海"
          placeholder="请输入搜索关键词"
          background="#21b97a"
        >
          <template #action>
            <van-icon name="location-o" size="25" />
          </template>
        </van-search>
      </template>
    </van-nav-bar>
    <!-- 下拉框 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <!-- <van-popup v-model="show" position="top" :style="{ height: '30%' }" /> -->
    </van-dropdown-menu>
    <!-- 找房列表 -->
    <div class="nav_list">
      <ul>
        <li>
          <div class="pictrue" v-for="item in list" :key="item.houseCode">
            <img :src="url + item.houseImg" alt="" />
            <div class="pictrue1">
              <span class="one">{{ item.title }}</span>
              <span class="two">{{ item.desc }}</span>
              <span class="three">{{ item.tags[0] }}</span>
              <i class="four">5000元/月</i>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { houses, housesID } from '@/api/user'
export default {
  name: 'collect-page',
  data () {
    return {
      list: '',
      url: 'http://liufusong.top:8080',
      value1: 0,
      value2: 'a',
      value3: 'A',
      option1: [
        { text: '区域', value: 0 },
        { text: '地铁', value: 1 },
        { text: '1号线', value: 2 },
        { text: '5号线', value: 3 },
        { text: '3号线北延段', value: 4 },
        { text: '13号线', value: 5 },
        { text: 'APM线', value: 6 },
        { text: '3号线', value: 7 }
      ],
      option2: [
        { text: '整租', value: 'a' },
        { text: '合租', value: 'b' },
        { text: '不限', value: 'c' }
      ],
      option3: [
        { text: '不限', value: 'A' },
        { text: '1000及以下', value: 'B' },
        { text: '1000 - 2000', value: 'C' },
        { text: '2000 - 3000', value: 'D' },
        { text: '3000 - 4000', value: 'E' },
        { text: '4000 - 5000', value: 'F' },
        { text: '5000 - 6000', value: 'G' }
      ]
    }
  },
  async created () {
    // 房间列表
    const data = await houses()
    // 房间详情
    const details = await housesID()
    console.log(details)
    // console.log(data.body)
    this.list = data.body.list
  },
  methods: {}
}
</script>
<style lang="less" scoped>
.bgca {
  background-color: green;
}
.pictrue {
  width: 100%;
  height: 140px;
  background-color: white;
  border-bottom: solid 1px #f6f5f6;
  padding: 0 10px;
  display: flex;
  position: relative;
  .pictrue1 {
    width: 70%;
    height: 140px;
    .one {
      position: absolute;
      left: 32%;
      top: 15px;
      font-weight: 600;
    }
    .two {
      position: absolute;
      left: 32%;
      top: 45px;
    }

    .three {
      position: absolute;
      left: 32%;
      top: 75px;
      color: skyblue;
      background-color: #f6f5f6;
    }

    .four {
      position: absolute;
      left: 32%;
      top: 105px;
      font-style: normal;
      color: red;
    }
  }
}

img {
  width: 30%;
  height: 120px;
}
.van-nav-bar {
  background-color: #21b97a;
  z-index: 9;
}
.searchfor {
  height: 55px;
}
</style>
